import React, { memo, useEffect, useState } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { newAlbumAction, albumNewestAction } from "./store/actionType";
import { allNewAlbum } from "@/services/local-data";
import { AlbumWrap } from "./style";
import { NavLink } from "react-router-dom";
import Pagination from "@/components/pagination";
import Loading from "@/components/loading";
import AlbumImg from "@/components/imgComponent/albumImg";

export default memo(function Album(props) {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(albumNewestAction());
  }, [dispatch, props]); // eslint-disable-line react-hooks/exhaustive-deps

  const state = useSelector(
    (state) => ({
      albumNewests: state.getIn(["album", "albumNewests"]),
    }),
    shallowEqual
  );

  const albumNews = state.albumNewests.code == 200 && state.albumNewests.albums;

  function AllNewAlbum() {
    const indexNum =
      props.location.search !== ""
        ? props.location.search.split("=")[2] !== undefined
          ? parseInt(props.location.search.split("=")[2])
          : 1
        : 1;

    const areaT =
      props.location.search !== ""
        ? props.location.search.split("=")[1].split("&")[0]
        : "";

    const [pageNum, setPageNum] = useState(indexNum);

    useEffect(() => {
      if (props.location.search.split("=")[1] !== undefined) {
        dispatch(newAlbumAction(35, (pageNum - 1) * 35, areaT));
      } else {
        dispatch(newAlbumAction(35, 0, "ALL"));
      }
    }, [dispatch, props, pageNum]); // eslint-disable-line react-hooks/exhaustive-deps

    const state = useSelector(
      (state) => ({
        newAlbums: state.getIn(["album", "albumNews"]),
      }),
      shallowEqual
    );

    const newAlbums = state.newAlbums.code == 200 && state.newAlbums.albums;

    const albumType = (area) => {
      setPageNum(1);
      dispatch(newAlbumAction(35, 0, area));
    };

    const changePage = (page, pageSize) => {
      setPageNum(page);
      props.history.push("/discover/album/?area=" + areaT + "&index=" + page);
    };

    return (
      <div>
        <div className="all-album">
          <h3>全部新碟</h3>
          <div className="all-a">
            {allNewAlbum.map((item, index) => {
              return (
                <NavLink
                  to={{
                    pathname: "/discover/album/",
                    search: "?area=" + item.area,
                  }}
                  onClick={(e) => albumType(item.area)}
                  key={item.area}
                >
                  {item.title}
                  {index !== 4 ? <span>|</span> : ""}
                </NavLink>
              );
            })}
          </div>
        </div>
        <div className="new-album-box">
          {newAlbums ? (
            newAlbums.map((item, index) => {
              return (
                <div key={item.id} className="albumImg">
                  <AlbumImg
                    url={item.blurPicUrl}
                    id={item.id}
                    name={item.name}
                    artistId={item.artist.id}
                    artistName={item.artist.name}
                  />
                </div>
              );
            })
          ) : (
            <div className="loading">
              <Loading />
            </div>
          )}
          <Pagination
            page={pageNum}
            size={35}
            getPage={changePage}
            total={state.newAlbums.length !== 0 ? state.newAlbums.total : ""}
          />
        </div>
      </div>
    );
  }

  document.title = `新碟上架 - 网易云音乐`;
  return (
    <AlbumWrap>
      <div className="albumBox wrap-v2">
        <div className="hot-album">
          <h3>热门新碟</h3>
        </div>
        <div className="new-album-box">
          {albumNews
            ? albumNews.slice(0, 10).map((item, index) => {
                return (
                  <div key={item.id} className="albumImg">
                    <AlbumImg
                      url={item.blurPicUrl}
                      id={item.id}
                      name={item.name}
                      artistId={item.artist.id}
                      artistName={item.artist.name}
                    />
                  </div>
                );
              })
            : ""}
        </div>
        <AllNewAlbum />
      </div>
    </AlbumWrap>
  );
});
